<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./jqueryconfirm/jquery-confirm.min.css">
    <link rel="stylesheet" type="text/css" href="./json-viewer/jquery.json-viewer.css">
</head>
<body>
    <div style="width: 100%;float: left;">
        <div style="width: 100%;float: left;height: 50px;background-color: #2894FF;">
            <ul style="float: left;list-style-type: none;line-height: 50px;color: white;font-weight: bold;width: 100%;letter-spacing: 1px;">
               <li style="float: left;margin-left: 5%;">欢迎来到通用后台管理</li>
               <li style="float: left;margin-left: 55%;">帮助文档</li>
               <li style="float: left;margin-left: 2%;">
                   <button type="button" class="btn btn-primary" style="" onclick="userLoginModal()">登录</button>
                   &nbsp;&nbsp;
                   <button type="button" class="btn btn-info" style="" onclick="userRegisterModal()">注册</button>
               </li>
            </ul>

        </div>
        <div style="width: 100%;float: left;height: 600px;">


            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="./images/lunbo_1.jpg" alt="First slide" style="width: 100%;height: 600px;">
                        <div class="carousel-caption">&nbsp;</div>
                    </div>
                    <div class="item">
                        <img src="./images/lunbo_2.jpg" alt="Second slide" style="width: 100%;height: 600px;">
                        <div class="carousel-caption">&nbsp;</div>
                    </div>
                    <div class="item">
                        <img src="./images/lunbo_3.jpg" alt="Third slide" style="width: 100%;height: 600px;">
                        <div class="carousel-caption">&nbsp;</div>
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>


        </div>
        <div style="width: 100%;float: left;"></div>
    </div>
    <script type="text/javascript" src="./js/request.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="./jqueryconfirm/jquery-confirm.min.js" ></script>
    <script type="text/javascript" src="./zTree_v3/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="./bootstrap/js/bootstrap-contextmenu.js"></script>
    <script type="text/javascript" src="./json-viewer/jquery.json-viewer.js"></script>

    <script type="text/javascript">
        var userloginlink = webrootpath+"login/userloginlink";//用户登录
        var userregisterlink = webrootpath+"login/userregisterlink";//用户注册
        var changeImagelink = webrootpath+"login/changeImage";//获取验证码（登录）
        var changeImagelink_register = webrootpath+"login/changeImage_register";//获取验证码（注册）
        var yzmstrkey = "";//验证码key登录
        var yzmstrkey_register = "";//注册验证码

        $(function () {

        });
        /***
         * 获取用户验证码
         * */
        function changeImage() {
            $.get(changeImagelink,function (_info) {
                if(_info.code=="1"){
                    $("#login_yzm_id").attr("src",_info.data);
                    yzmstrkey = _info.yzmstrkey;
                }
            });
        }
        /***
         * 获取注册验证码
         * */
        function changeImageRegister() {
            $.get(changeImagelink_register,function (_info) {
                if(_info.code=="1"){
                    $("#register_yzm_id").attr("src",_info.data);
                    yzmstrkey_register = _info.yzmstrkey;
                }
            });
        }
        /***
         * 用户注册
         */
        function userRegister() {
            var register_username = $.trim($("#register_username").val());
            var register_userpwd = $.trim($("#register_userpwd").val());
            var register_userpwd_2 = $.trim($("#register_userpwd_2").val());
            if(register_username==""){
                $.alert("请输入用户名");
                return false;
            }
            if (register_userpwd==""){
                $.alert("请输入密码");
                return false;
            }
            if (register_userpwd_2==""){
                $.alert("请输入确认密码");
                return false;
            }
            if(register_userpwd!=register_userpwd_2){
                $.alert("用户名和密码不一致");
                return false;
            }

            var register_yzm = $.trim($("#register_yzm").val());
            if(register_yzm==""){
                alert("验证码不能为空");
                return false;
            }


            $.post(userregisterlink,{
                register_username:register_username,
                register_userpwd:register_userpwd,
                register_yzm:register_yzm,
                yzmstrkey_register:yzmstrkey_register
            },function (content) {
                if(content.code=="1"){
                    $.alert(content.msg,"提示");
                    $("#userregister_modal").modal('hide');
                }else {
                    $.alert(content.msg,"提示");
                    changeImageRegister();
                }
            });
        }
        /***
         * 用户登录
         */
        function userLogin() {
            var username = $.trim($("#login_username").val());
            var userpwd = $.trim($("#login_userpwd").val());
            var login_yzm = $.trim($("#login_yzm").val());
            if(login_yzm==""){
                alert("验证码不能为空");
                return false;
            }
            if(username!="" && userpwd!=""){
                $.post(userloginlink,{
                    user_denglu_name:username,
                    user_denglu_pwd:userpwd,
                    user_denglu_yzm:login_yzm,
                    yzmstrkey:yzmstrkey
                },function (content) {
                    if (content.code=="1"){
                        sessionStorage.setItem("usertoken",content.data.usertoken);
                        window.location.href="./index.html";
                    }else {
                        $.alert(content.msg,"提示");
                        changeImage();
                    }
                });
            }else {
                $.alert("请填写用户名或者密码！","提示");
            }
        }

        /***
         * 用户注册弹出框
         */
        function userRegisterModal() {
            $("#userregister_modal").modal('show');
            $("#register_username").val("");
            $("#register_userpwd").val("");
            $("#register_userpwd_2").val("");
            changeImageRegister();
        }


        /***
         * 用户登录弹出框
         */
        function userLoginModal() {
            $("#userlogin_modal").modal('show');
            $("#login_username").val("");
            $("#login_userpwd").val("");
            $("#login_yzm").val("");
            changeImage();
        }
    </script>


    <!-- 用户登录（Modal） -->
    <div class="modal fade" id="userlogin_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">用户登录</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="login_username">用户名</label>
                        <input type="text" class="form-control" id="login_username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="login_userpwd">密码</label>
                        <input type="password" class="form-control" id="login_userpwd" placeholder="请输入密码">
                    </div>
                    <div class="form-group" style="padding-bottom: 20px;">
                        <label for="login_yzm">验证码</label>
                        <div style="width: 100%;float: left;">
                            <input id="login_yzm" class="form-control" type="text" style="width: 100px;float: left;"/>&nbsp;&nbsp;<img style="float: left;" id="login_yzm_id"  onclick="changeImage()"/>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="userLogin()">登录</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 用户注册（Modal） -->
    <div class="modal fade" id="userregister_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel_register">用户注册</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="register_username">用户名</label>
                        <input type="text" class="form-control" id="register_username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="register_userpwd">密码</label>
                        <input type="password" class="form-control" id="register_userpwd" placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label for="register_userpwd_2">确认密码</label>
                        <input type="password" class="form-control" id="register_userpwd_2" placeholder="确认密码">
                    </div>

                    <div class="form-group" style="padding-bottom: 20px;">
                        <label>验证码：</label>
                        <div style="width: 100%;float: left;">
                            <input id="register_yzm" class="form-control" type="text" style="width: 100px;float: left;"/>&nbsp;&nbsp;<img style="float: left;" id="register_yzm_id"  onclick="changeImageRegister()"/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" >
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="userRegister()">注册</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
</html>